#{extends 'main.html' /}
#{set title:'index.html' /}
#{if flash.success}
<div class="alert alert-success">${flash.success}</div>    
#{/if}
#{elseif flash.error}
<div class="alert alert-error">${flash.error}</div>
#{/elseif}
<div class="well">
	<fieldset>
		<legend>Registro de Categorias</legend>
		<form class="form-horizontal" id="formulario-categoria" action="@{Categorias.guardar()}">
			<div class="control-group">
				<label class="control-label required-form" for="deCategoria">Nombre</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="deCategoria" name="categoria.deCategoria"/>
						<span class="add-on"><i>#</i></span>
					</div>
					<span class="help-inline hide" id="spanDeCategoria">La Categoria ingresada ya existe</span>					
				</div>
			</div>	
						<div class="control-group">
				<label class="control-label required-form" for="desCategoria">Descripcion</label>
				<div class="controls">
					<div class="input-append">
						<input type="text" id="desCategoria" name="categoria.desCategoria"/>
						<span class="add-on"><i>#</i></span>
					</div>
					<span class="help-inline hide" id="spanDesCategoria">La descripcion ingresada ya existe</span>					
				</div>
			</div>			
			<div class="control-group">
				<label class="control-label" for="categoria">Categoria Padre</label>
				<div class="controls">
					<div class="input-append">
						<select class="select" name="categoria.categoria.coCategoria" id="categoria">
							<option value="">--SELECCIONE--</option>
							#{list items:categoriasPadre,as:'categoriaPadre'}
								<option value="${categoriaPadre.coCategoria}">${categoriaPadre.deCategoria}</option>
							#{/list}
						</select>
					</div>
				</div>
			</div>
			<div class="form-actions">
				<button class="btn btn-primary" id="btnGuardar">Guardar</button>
			</div>
		</form>		
	</fieldset>
</div>
<table class="table table-striped table-bordered table-condensed">
	<thead>
		<tr>
			<th>ID</th>
			<th>CATEGORIA</th>			
			<th>CATEGORIA PADRE</th>
			<th>DESCRIPCION</th>
		</tr>
	</thead>
	<tbody>
		#{list items:categorias,as:'categoria'}
			<tr>
				<td>${categoria?.coCategoria}</td>
				<td>${categoria?.deCategoria}</td>				
				<td>${categoria?.categoria?.deCategoria == null ? '-' : categoria?.categoria?.deCategoria}</td>
				<td>${categoria?.desCategoria}</td>
			</tr>
		#{/list}
	</tbody>
</table>
<script type="text/javascript">
	var Categoria = {
			flag : 0,
			init : function(){
				$(document).delegate("#btnGuardar","click",Categoria.guardar);
			},
			guardar : function(e){
				e.preventDefault();
				if(Categoria.validarCategoria()){
					form = $("#formulario-categoria");
					if(form.validateForm()==0 && Categoria.flag ==0){
						form.submit();
					}
				}
			},
			validarCategoria : function(){
				var fl;
				$.ajax({
					url:"@{Categorias.validarCategoria}",
					data:{categoria : $("#deCategoria").val()},
					async: false,
					success:function(result){
						if(result.status == 0){
							Categoria.flag = 1;
							$("#spanDeCategoria").show().parents("div.control-group").addClass("error");
							fl = false;
						}else{
							Categoria.flag = 0 ;
							fl= true;
						}
					}
				})
				return fl;
			}
	}
	$(function(){
		Categoria.init();
	})
</script>